<template>
  <div class="login-body">
  <div :class="['container',signIn?'': 'right-panel-active']">
    <!-- Sign Up -->
    <div class="container__form container--signup">
      <el-form class="form" >
        <h2 class="form__title">注册</h2>
        <el-input type="text" placeholder="账号" class="login-input" />
        <el-input type="email" placeholder="邮箱" class="login-input" />
        <el-input type="password" placeholder="密码" class="login-input" />
        <el-button class="btn" >注册</el-button>
      </el-form>
    </div>

    <!-- Sign In -->
    <div class="container__form container--signin">
      <el-form  :model="loginForm" class="form" :rules="rules" ref="loginform">
        <h2 class="form__title">登陆</h2>
        <el-form-item prop="username" class="login-form-item">
          <el-input  v-model="loginForm.username" placeholder="账号" class="login-input"/>
        </el-form-item>
        <el-form-item prop="password" class="login-form-item">
          <el-input v-model="loginForm.password" type="password" placeholder="密码" class="login-input" show-password/>
        </el-form-item>
        <el-form-item prop="verifycode" class="login-form-item">
          <el-input v-model="loginForm.verifycode"
                    placeholder="请输入验证码"
                    class="identifyinput">
            <i slot="prefix"
               class="el-input__icon el-icon-s-check"
               style="font-size: 22px"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <div class="identifybox">
            <div @click="refreshCode">
              <Identify :identifyCode="identifyCode"></Identify>
            </div>
            <el-button @click="refreshCode" type='text' class="textbtn">看不清，换一张</el-button>
          </div>
        </el-form-item>
        <el-form-item><a href="#" class="link">忘记密码?</a></el-form-item>
        <el-form-item>
          <el-button class="btn" @click="login('loginform')">登陆</el-button>
        </el-form-item>

      </el-form>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
      <div class="overlay">
        <div class="overlay__panel overlay--left">
          <el-button class="btn" id="signIn" @click="signIn=true">登陆</el-button>
        </div>
        <div class="overlay__panel overlay--right">
          <el-button class="btn" id="signUp" @click="signIn=false">注册</el-button>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>

import {accountSignIn} from '../services/accountService';
import Identify from "./common/Identify";
export default {
    name: 'Login',
  components: {Identify},
  data() {
      // 验证码自定义验证规则
      const validateVerifycode = (rule, value, callback) => {
        let newVal = value.toLowerCase()
        let identifyStr =	this.identifyCode.toLowerCase()
        if (newVal === '') {
          callback(new Error('请输入验证码'))
        } else if (newVal !== identifyStr) {
          console.log('validateVerifycode:', value)
          callback(new Error('验证码不正确!'))
        } else {
          callback()
        }
      }
      return {
        //登录校验
        rules:{
          username:[
            {required:true,message:'请输入账号',trigger:'blur'}
          ],
          password: [
            {required:true,message:'请输入密码',trigger:'blur'}
          ],
          verifycode: [
            { required: true, trigger: 'blur', validator: validateVerifycode }
          ]},
        signIn:true,
        loginForm: {
          username: '',
          password: '',
          verifycode:''
        },
        responseResult: [],
        identifyCodes: '1234567890ABCDEFGHIGKLMNoPQRSTUVWXYZ',
        identifyCode: '',
      }
    },
    mounted() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
  methods: {
      login(formName) {
        console.log('login');
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            //校验通过 登录
            //this.$refs[formName].submit();
            await accountSignIn(this.loginForm).then(success=>{

              this.$message({
                type:'success',
                message:'登陆成功'
              });
              //登陆状态更新
              this.$store.commit('user/login', {user:this.loginForm, token:success})
              let path = this.$route.query.redirect
              this.$router.replace({path: path === '/' || path === undefined ? '/index' : path})
            },failed=>{
              this.$message({
                type:'warning',
                message:failed.msg
              })
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
        /*
        this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              // var data = this.loginForm
              _this.$store.commit('user/login', _this.loginForm)
              var path = this.$route.query.redirect
              this.$router.replace({path: path === '/' || path === undefined ? '/index' : path})
            }
          })
          .catch(failResponse => {
          })*/
      },
    // 生成随机数
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 切换验证码
    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成四位随机验证码
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
      }
      console.log(this.identifyCode)
    },
    }
  }
</script>
<style>
.identifybox{
  display: flex;
  justify-content: space-between;
  margin-top:7px;
}


.login-body {
  align-items: center;
  background-color: #e9e9e9;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  height: 100vh;
  width: 100vw;
  place-items: center;
}

.form__title {
  font-weight: 300;
  margin: 0;
  margin-bottom: 1.25rem;
}

.link {
  color: #333333;
  font-size: 0.9rem;
  margin: 1.5rem 0;
  text-decoration: none;
}

.container {
  background-color: #e9e9e9;
  border-radius:  0.7rem;
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
  0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  height: 80%;
  overflow: hidden;
  position: relative;
  width: 60%;
}

.container__form {
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.6s ease-in-out;
}

.container--signin {
  left: 0;
  width: 50%;
  z-index: 2;
}

.container.right-panel-active .container--signin {
  transform: translateX(100%);
}

.container--signup {
  left: 0;
  opacity: 0;
  width: 50%;
  z-index: 1;
}

.container.right-panel-active .container--signup {
  animation: show 0.6s;
  opacity: 1;
  transform: translateX(100%);
  z-index: 5;
}

.container__overlay {
  height: 100%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: transform 0.6s ease-in-out;
  width: 50%;
  z-index: 100;
}

.container.right-panel-active .container__overlay {
  transform: translateX(-100%);
}

.overlay {
  background-color: #008997;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: -100%;
  position: relative;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 200%;
}

.container.right-panel-active .overlay {
  transform: translateX(50%);
}

.overlay__panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 50%;
}

.overlay--left {
  transform: translateX(-20%);
}

.container.right-panel-active .overlay--left {
  transform: translateX(0);
}

.overlay--right {
  right: 0;
  transform: translateX(0);
}

.container.right-panel-active .overlay--right {
  transform: translateX(20%);
}

.btn {
  background-color: #0367a6;
  background-image: linear-gradient(90deg, #0367a6 0%, #008997 74%);
  border-radius: 20px;
  border: 1px solid #0367a6;
  color: #e9e9e9;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
}

.form>.btn {
  margin-top: 1.5rem;
}

.btn:active {
  transform: scale(0.95);
}

.btn:focus {
  outline: none;
}

.form {
  background-color: #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 3rem;
  height: 100%;

  text-align: center;
}

.login-input {
background-color: #fff;
margin: 0.5rem 0;
width: 100%;
}
.login-form-item{
  width: 100%;
}
@keyframes show {

0%,
49.99% {
opacity: 0;
z-index: 1;
}

50%,
100% {
opacity: 1;
z-index: 5;
}
}
</style>
